<template>
  <!--最外层图标div-->
  <!--设置内上边距 下内边距-->
  <div class="container grow zs:py">
    <!--浮动div列表，因为float会让父元素没有高度，使用clear清楚元素-->
    <div class="clear"></div>
    <!--第一个图标-->
    <div class="float-left sicon">
      <div class="icf pd-st mr-center">
        <div class="st-size">
          <svg width="160" height="36" viewBox="0 0 160 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M68.244 17.251C68.244 17.251 71.466 16.158 71.466 12.515C71.466 8.253 68.427 6.141 64.254 6.141H53.306V29.308H65.206C68.866 29.308 72.455 26.758 72.455 22.861C72.455 18.235 68.244 17.287 68.244 17.251ZM59.018 10.949H63.265C64.583 10.949 65.462 11.823 65.462 13.135C65.462 14.155 64.656 15.248 63.155 15.248H58.981L59.018 10.949ZM63.302 24.464H59.055V19.91H63.192C65.279 19.91 66.267 20.82 66.267 22.169C66.267 23.844 65.022 24.464 63.302 24.464ZM85.05 5.558C78.313 5.558 74.359 10.913 74.359 17.688C74.359 24.5 78.313 29.818 85.049 29.818C91.823 29.818 95.74 24.5 95.74 17.688C95.74 10.913 91.823 5.558 85.05 5.558ZM85.05 24.281C81.754 24.281 80.107 21.331 80.107 17.688C80.107 14.045 81.754 11.131 85.049 11.131C88.345 11.131 90.029 14.081 90.029 17.688C90.029 21.368 88.346 24.281 85.05 24.281ZM108.152 15.248L107.346 15.065C105.369 14.665 103.795 14.155 103.795 12.734C103.795 11.204 105.296 10.584 106.615 10.584C108.555 10.584 110.275 11.532 111.374 12.734L114.998 9.164C113.351 7.306 110.678 5.521 106.504 5.521C101.598 5.521 97.864 8.253 97.864 12.807C97.864 16.96 100.866 19 104.527 19.764L105.333 19.947C108.372 20.566 109.507 21.039 109.507 22.497C109.507 23.881 108.262 24.791 106.357 24.791C104.087 24.791 102.037 23.808 100.463 21.804L96.765 25.447C98.815 27.887 101.415 29.782 106.431 29.782C110.788 29.782 115.438 27.305 115.438 22.242C115.511 16.96 111.484 15.94 108.152 15.248ZM128.472 24.281C125.909 24.281 123.236 22.169 123.236 17.542C123.236 13.426 125.726 11.132 128.326 11.132C130.376 11.132 131.584 12.078 132.536 13.718L137.222 10.621C134.879 7.088 132.096 5.594 128.252 5.594C121.222 5.594 117.415 11.022 117.415 17.579C117.415 24.464 121.625 29.855 128.179 29.855C132.792 29.855 134.989 28.252 137.369 24.828L132.646 21.658C131.694 23.188 130.669 24.281 128.472 24.281ZM152.746 6.14V14.665H145.68V6.14H139.565V29.307H145.68V20.164H152.746V29.307H158.86V6.141L152.746 6.14Z"
              fill="#ED0007"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M17.903 0.239998C8.26499 0.239998 0.437988 8.027 0.437988 17.616C0.437988 27.206 8.26499 34.993 17.903 34.993C27.542 34.993 35.369 27.206 35.369 17.616C35.369 8.026 27.542 0.239998 17.903 0.239998ZM17.903 33.37C9.17099 33.37 2.06899 26.305 2.06899 17.616C2.06899 8.928 9.17099 1.862 17.903 1.862C26.636 1.862 33.738 8.928 33.738 17.616C33.738 26.305 26.636 33.37 17.903 33.37Z"
              fill="black"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M25.114 6.765H23.918V12.713H11.924V6.765H10.692C7.17799 9.108 4.82199 13.074 4.82199 17.616C4.82199 22.159 7.17799 26.125 10.692 28.468H11.924V22.519H23.918V28.468H25.114C28.665 26.125 30.984 22.158 30.984 17.616C30.984 13.074 28.665 9.108 25.114 6.765ZM10.258 26.125C9.04628 25.064 8.07636 23.7554 7.41373 22.2875C6.7511 20.8196 6.4112 19.2265 6.41699 17.616C6.41699 14.3 7.82999 11.236 10.257 9.108V26.125H10.258ZM23.918 20.861H11.924V14.336H23.918V20.861ZM25.548 26.089V9.108C26.7449 10.1711 27.703 11.4758 28.359 12.9361C29.015 14.3964 29.3541 15.9791 29.354 17.58C29.354 20.897 27.939 23.961 25.548 26.089Z"
              fill="black"
            />
          </svg>
        </div>
      </div>
    </div>
    <!--第二个图标-->
    <div class="float-left sicon">
      <div class="icf pd-em mr-center">
        <div class="em-size">
          <img src="@/assets/images/ec.png" alt="ecl" width="160" height="40" />
        </div>
      </div>
    </div>

    <!--第三个图标-->
    <div class="float-left sicon">
      <div class="icf pd-es mr-center">
        <div class="es-size">
          <svg width="148" height="41" viewBox="0 0 148 41" fill="none" xmlns="http://www.w3.org/2000/svg">
            <mask id="mask0_36_134" style="mask-type: luminance" maskUnits="userSpaceOnUse" x="0" y="2" width="148" height="39">
              <path d="M0 2H148V41H0V2Z" fill="white" />
            </mask>
            <g mask="url(#mask0_36_134)">
              <path
                d="M120.25 14.2881C120.25 12.2507 121.836 10.5925 123.785 10.5925H140.135C142.669 10.5925 144.248 8.84336 144.248 6.68627C144.248 4.52917 142.669 2.78005 140.135 2.78005H124.111C117.631 2.78005 112.723 7.94248 112.723 14.2881C112.723 20.6338 117.631 25.7962 124.111 25.7962H136.95C138.899 25.7962 140.485 27.4544 140.485 29.4919C140.485 31.5294 138.899 33.1876 136.95 33.1876L120.599 33.1888C118.066 33.1888 116.487 34.9379 116.487 37.095C116.487 39.2521 118.066 41.0012 120.599 41.0012L136.623 41C143.104 41 148.012 35.8376 148.012 29.4919C148.012 23.1462 143.104 17.9838 136.623 17.9838H123.785C121.836 17.9838 120.25 16.3256 120.25 14.2881ZM112.105 34.817L95.5395 5.03525C95.1015 4.24802 94.5448 3.67256 93.9304 3.2945L93.9281 3.2921C93.9224 3.28851 93.9166 3.28612 93.9108 3.28253C93.4717 3.01574 93.0049 2.85303 92.53 2.79201L92.5035 2.78842C92.4112 2.77766 92.319 2.76928 92.2257 2.76569C92.1258 2.76091 92.0258 2.76091 91.926 2.76569C91.8338 2.76928 91.7416 2.77646 91.6482 2.78842L91.6228 2.79201C91.1468 2.85422 90.68 3.01693 90.242 3.28253C90.2362 3.28612 90.2304 3.28851 90.2247 3.2921C90.2247 3.2921 90.2235 3.2945 90.2224 3.2945C89.608 3.67256 89.0513 4.24802 88.6133 5.03525L72.0474 34.817C70.7807 37.0938 71.4503 39.3885 73.2508 40.4664C75.0501 41.5456 77.2989 41 78.5656 38.7233L92.077 14.4329L105.588 38.7233C106.855 41 109.104 41.5456 110.903 40.4664C112.702 39.3885 113.372 37.095 112.105 34.817ZM77.7945 6.68627C77.7945 4.52917 76.2154 2.78005 73.6819 2.78005H41.6867C39.1531 2.78005 37.574 4.52917 37.574 6.68627C37.574 8.84336 39.1531 10.5925 41.6867 10.5925H53.9232V36.7325C53.9232 39.3621 55.6083 41.0012 57.6866 41.0012C59.7648 41.0012 61.45 39.3621 61.45 36.7325V10.5925H73.683C76.2154 10.5925 77.7945 8.84336 77.7945 6.68627ZM37.574 21.5C37.574 10.748 29.1459 2 18.787 2C8.42816 2 0 10.748 0 21.5C0 32.9818 8.39704 41 20.4203 41H27.1645C30.0023 41 31.9295 39.3514 31.9295 37.0938C31.9295 34.9367 30.3504 33.1876 27.8169 33.1876H20.4192C14.309 33.1876 9.88396 30.3952 8.23452 25.795H33.8095C35.8877 25.795 37.5729 24.0459 37.5729 21.8888V21.5H37.574ZM29.5262 17.9838H8.04779C9.4886 13.2521 13.758 9.81244 18.787 9.81244C23.816 9.81244 28.0854 13.2521 29.5262 17.9838Z"
                fill="white"
              />
            </g>
          </svg>
        </div>
      </div>
    </div>
    <!--第四个图标-->
    <div class="float-left sicon">
      <div class="icf pd-es mr-center">
        <div class="es-size">
          <img src="@/assets/images/al.svg" alt="ecl" width="160" height="40" />
        </div>
      </div>
    </div>
    <!--第五个图标-->
    <div class="float-left sicon">
      <div class="icf pd-es mr-center">
        <div class="es-size">
          <img src="@/assets/images/covesa-logo.png" alt="ecl" width="160" height="40" style="background-color: white" />
        </div>
      </div>
    </div>

    <div class="clear"></div>
  </div>
</template>

<script>
export default {
  name: "HomeHeaderIcon",
  data() {
    return {};
  }
};
</script>

<style scoped>
.bg-test {
  background-color: bisque;
}
.sicon {
  width: 100%;
  height: 70px;
}
.fbe {
  filter: brightness(10%);
}

.zs\:py {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

@media (min-width: 532px) {
  .sicon {
    width: 250px;
    height: 70px;
  }
  .zs\:py {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

@media (min-width: 744px) {
  .sicon {
    width: 232px;
    height: 70px;
  }
  .zs\:py {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

@media (min-width: 1024px) {
  .sicon {
    width: 240px;
    height: 70px;
  }
  .zs\:py {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

@media (min-width: 1440px) {
  .sicon {
    width: 262.4px;
    height: 70px;
  }
  .zs\:py {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.icf {
  width: 200px;
  height: 60px;
}

.st-size {
  width: 160px;
  height: 36px;
}

.pd-st {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.pd-em {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.em-size {
  width: 160px;
  height: 40px;
}

.mr-center {
  margin: 0 auto 10px;
}

.es-size {
  width: 148px;
  height: 41px;
}

.pd-es {
  padding-left: 26px;
  padding-right: 26px;
  padding-top: 9.5px;
  padding-bottom: 9.5px;
}
</style>
